<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页</title>
</head>
<body>
<h2>欢迎登录</h2>

<form action="javascript:;">
    <p><input type="text" name="username" placeholder="请输入用户名"></p>
    <p><input type="password" name="password" placeholder="请输入密码"></p>
    <p><input type="text" name="captcha" placeholder="请输入验证码"><img src="http://localhost/captcha" width="110" height="50"></p>
    <p>
        <button id="login">立即登录</button>
    </p>
    <span id="info"></span>
</form>
<!--
    跨域资源访问   CORS
       什么是跨域  ? 只要违背了同源策略
     同源策略        http://localhost:63343/     ->  http://localhost:8080/user/login
           请求协议  http  https
           IP      localhost
           port    8080
         以上三个部分全部一样同源  只要其中之一不一样则违背同源策略
   一般同源策略是限制异步请求

   vue.js    vue2  ES6      ->   vue3 -> typeScript

-->
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>-->

<script src="jquery-3.7.1.js"></script>
<script type="text/javascript">

    // 页面加载完毕之后执行该函数   入口函数
    $(function () {
        $("#login").on("click", function () {
            // 获取用户名  密码
            let username = $("input[name='username']").val()
            let password = $("input[name='password']").val()
            let captcha = $("input[name='captcha']").val()
            console.log(username, password)
            // TODO 发送异步请求
            $.get("http://localhost/user/login", {username, password,captcha}, function (res) {
                if (res.code == 0) {
                    $("#info").css("color", "green").html(res.message+":"+res.data.token)
                } else {
                    $("#info").css("color", "red").html(res.message)
                }
            })
        })
    })
</script>

</body>
</html>